<style scoped>


    .rule_mall .score_item{

        width:calc(100% - .4rem);
        padding:0 .2rem;
        height:1.56rem;
        display: -webkit-flex;
        -webkit-flex-direction: column;
        -webkit-justify-content: space-around;
        -webkit-align-items: center;
        border-bottom:1px solid #ccc;

    }





    .rule_mall .score_item h2{

        color: #ff534b;
        font-size:.18rem;
        font-weight:bold;
        
    }
    .rule_mall .score_item p{

        color: #ff534b;

    }

    .rule_mall .score_item .calcCount{


        height: .3rem;
        border-radius: .1rem;
        overflow: hidden;

    }

    .rule_mall .score_item .calcCount span{
        display: inline-block;
        width:.3rem;
        height:.3rem;
        text-align: center;
        line-height:.3rem;
        background: #dedede;
        color: #879194;
        font-size: .14rem;
    }

    .rule_mall .score_item .calcCount input{

        display: inline-block;
        width:.5rem;
        height:.28rem;
        border-width:.01rem;
        border-color: #dedede;
        border-style: solid;
        vertical-align: center;
        text-align: center;

    }


    .rule_mall .score_btn_box{

        width:100%;
        height:.67rem;
        display: -webkit-flex;
        -webkit-flex-direction:row;
        -webkit-justify-content: space-around;
        -webkit-align-items: center;

    }




    .rule_mall .score_btn_box button{

        width:1.19rem;
        height: .29rem;
        border:.01rem solid;
        border-radius:.05rem;
        
    }

    .rule_mall .score_btn_box button.sure{
        color: #879194;
        border-color:#879194;
        background: #ffffff;
    }


    .rule_mall .score_btn_box button.cancle{

        color: #ffffff;
        border-color:#ef3737;
        background: #ef3737;

    }
</style>
<template>
    <div class="mask" v-show="scoreMask">
        <div class="rule_mall background_12">
            <div class="pop_banner score_banner"></div>
            <div class="score_item">
                <h2>积分兑换</h2>
                <p>兑换规则：每{{scoreData.integral}}积分可兑换1{{scoreData.rule_type==1?'个拼宝币':'张优惠券'}},剩余{{scoreData.surplus_points}}积分可兑换{{Math.floor(scoreData.surplus_points / scoreData.integral)}}{{scoreData.rule_type==1?'个拼宝币':'张优惠券'}}</p>
                <div class="calcCount">
                    <template  v-if="(Math.floor(scoreData.surplus_points / scoreData.integral)) <= scoreData.surplus_exchange_num">

                        <span :data-change="-1"  :data-min="1" :data-max="Math.floor(scoreData.surplus_points / scoreData.integral)">-</span>
                        <input v-model="inputNum" disabled type="number" :data-min="1" :data-max="scoreData.surplus_exchange_num" @change="changeInput($event)"/>
                        <span :data-change="1"  :data-min="1" :data-max="Math.floor(scoreData.surplus_points / scoreData.integral)">+</span>

                    </template>
                    <template v-else>

                        <span :data-change="-1"  :data-min="1" :data-max="scoreData.surplus_exchange_num">-</span>
                        <input v-model="inputNum" disabled type="number" :data-min="1" :data-max="scoreData.surplus_exchange_num" @change="changeInput($event)"/>
                        <span :data-min="1" :data-max="scoreData.surplus_exchange_num">+</span>

                    </template>
                    </div>
            </div>
            <div class="score_btn_box">
                <button class="cancle" @click.prevent="close">取消</button>
                <button class="sure" @click.prevent="getExchange(scoreData.id,inputNum,scoreData.rule_type)">确定</button>
            </div>
        </div>
    </div>

</template>
<script>
    import Request from '../config/request'
//    import Config from '../config/config'
    import User from '../module/user'
    module.exports = {
        props:{

            scoreData:{
                type:Object,
                default:{}
            },
            scoreMask:{
                type:Boolean,
                default:false
            },
            inputNum:{
                type:[Number,String],
                default:0
            }


        },
        data() {
            return {



            }
        },
        components: {},
        created(){

        },
        ready() {

        },
        beforeDestroy() {

        },
        methods: {

            changeInput(e){
                let [max, min, val]=[Number.parseInt(e.target.dataset.max), Number.parseInt(e.target.dataset.min), Number.parseInt(e.target.value)];
                if (val > max)
                    this.inputNum = max
                else if (val < min)
                    this.inputNum = min
                else if (!val)
                    this.inputNum = 1
            },
            changeNum(num,e){
                let [max,min,number]=[Number.parseInt(e.target.dataset.max),Number.parseInt(e.target.dataset.min),Number.parseInt(num)];
                this.inputNum = Number.parseInt(this.inputNum)+number;
                if(this.inputNum > max ){
                    this.inputNum = max;
                }else if(this.inputNum < min ){
                    this.inputNum = min;
                }
            },
            async getExchange(id,num,ruletype){
                let token = User.token;
                let res = await Request.post(Config.apiDomain + '/integral/exchange',{data:{
                        token: token,
                        ruleid: id,
                        num:num
                }});
                this.$dispatch('closeScorePop',false);

                if(res.status==200){

                    this.$dispatch('closestatusPop',{status:true,msg:res.msg});

                }else{

                    this.$dispatch('closestatusPop',{status:true,msg:res.msg});

                }
            },
            close(){
                this.$dispatch('closeScorePop',false);
            }

        }
    }
</script>
